<template>
  <div>
    <!-- disabled -->
    <!-- :trigger="['contextmenu']"  -->
    <a-dropdown-button loading v-model:open="visible">
      <a
        class="ant-dropdown-link"
        @click.prevent
      >
        Hover me
        <DownOutlined />
      </a>
      <template #overlay>
        <a-menu @click="onClick">
          <a-menu-item key="1">
            <a href="javascript:;">1st menu item</a>
          </a-menu-item>
          <a-menu-item key="2">
            <a href="javascript:;">2nd menu item</a>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item
            key="3"
            disabled
          >
            <a href="javascript:;">3rd menu item</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown-button>

    <div
      id="components-dropdown-demo-placement"
      style="margin-top:50px"
    >
      <template
        v-for="(placement, index) in placements"
        :key="placement"
      >
        <a-dropdown
          :placement="placement"
          :arrow="{ pointAtCenter: true }"
          :trigger="['click']"
        >
          <a-button>{{ placement }}</a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href="http://www.alipay.com/"
                >
                  1st menu item
                </a>
              </a-menu-item>
              <a-menu-item>
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href="http://www.taobao.com/"
                >
                  2nd menu item
                </a>
              </a-menu-item>
              <a-menu-item>
                <a
                  target="_blank"
                  rel="noopener noreferrer"
                  href="http://www.tmall.com/"
                >
                  3rd menu item
                </a>
              </a-menu-item>
              <a-sub-menu
                key="sub1"
                title="sub menu"
              >
                <a-menu-item>3rd menu item</a-menu-item>
                <a-menu-item>4th menu item</a-menu-item>
              </a-sub-menu>
              <a-sub-menu
                key="sub2"
                title="disabled sub menu"
                disabled
              >
                <a-menu-item>5d menu item</a-menu-item>
                <a-menu-item>6th menu item</a-menu-item>
              </a-sub-menu>
            </a-menu>
          </template>
        </a-dropdown>
        <br v-if="index === 2" />
      </template>
    </div>
  </div>
</template>

<script>
import { DownOutlined, } from '@ant-design/icons-vue'
export default {
  name: '',
  components: { DownOutlined },
  data() {
    return {
      visible: false,
      placements: ['bottomLeft', 'bottom', 'bottomRight', 'topLeft', 'top', 'topRight'],

    }
  },
  created() { },
  mounted() { },
  methods: {
    onClick(e) {
      console.log(e);
      if (e.key === '2') {
        this.visible = false;
      }

    }
  },
  computed: {}
}
</script>
<style scoped lang='scss'>
#components-dropdown-demo-placement .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>
